<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form :model="searchForm" inline size="mini">
        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.username"
            clearable
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button
            type="default"
            size="mini"
            @click="searchForm = {}"
          >清空</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="show=true"
          >新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          prop="username"
          header-align="center"
          align="center"
          label="用户名"
        />
        <el-table-column
          prop="nickname"
          header-align="center"
          align="center"
          label="昵称"
        />
        <el-table-column
          prop="userType"
          header-align="center"
          align="center"
          label="权限类型"
        >
          <template slot-scope="scope">
            {{
              scope.row.userType == '1'
                ? '普通用户'
                : scope.row.userType == '2'
                  ? '作业区审批'
                  : scope.row.userType == '3'
                    ? '工艺所审批'
                    : 'root用户'
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 5px"
              @click="edit(scope.row)"
            >修改</el-link>
            <el-link
              :disabled="$store.state.user.userInfo.userType != '4'"
              type="danger"
              :underline="false"
              @click="del(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @changePage="getListPage1(arguments)"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog
      title="用户管理"
      :visible.sync="show"
      width="40%"
      :before-close="beforeClose"
    >
      <el-form
        ref="register"
        :model="userInfo"
        :rules="rules"
        label-width="auto"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userInfo.username" clearable />
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="密码" prop="password">-->
<!--              <el-input v-model="userInfo.password" type="password" clearable />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="userInfo.nickname" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限" prop="userType">
              <el-select v-model="userInfo.userType" clearable>
                <el-option label="普通用户" :value="1" />
                <el-option label="作业区审批" :value="2" />
                <el-option label="工艺所审批" :value="3" />
                <el-option label="管理员" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
export default {
  name: 'UserManager',
  components: { Pagination },
  data() {
    return {
      page: 1,
      limit: 20,
      total: 0,
      searchForm: {},
      tableData: [],
      userInfo: {},
      rules: {
        username: { required: true, message: '请输入必填项', trigger: 'blur' },
        // password: { required: true, message: '请输入必填项', trigger: 'blur' },
        nickname: { required: true, message: '请输入必填项', trigger: 'blur' },
        userType: { required: true, message: '请输入必填项', trigger: 'change' }
      },
      show: false
    }
  },

  created() {
    this.getListPage(this.page, this.limit, this.searchForm)
  },

  methods: {
    changePage(pageNum, pageSize) {
      this.getListPage(pageNum, pageSize, this.searchForm)
    },
    getListPage(pageNum, pageSize, data) {
      this.$http
        .post('/sysUser/pageQuery', {
          pageNum,
          pageSize,
          data
        })
        .then(({ data: { data: res }}) => {
          this.tableData = res.records
          this.total = res.total
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    search() {
      this.page = 1
      this.getListPage(this.page, this.limit, this.searchForm)
    },
    edit(data) {
      this.userInfo = data
      this.show = true
    },
    del(id) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .post('/sysUser/delete', { id })
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //页码变动
    getListPage1(msg) {
      let pageNum = msg[0]
      let pageSize=msg[1]
      let data=this.searchForm
      this.$http.post('/sysUser/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //每页记录数变动
    handleSizeChange(size){
      let pageSize=this.page
      let pageNum=size
      let data=this.searchForm
      this.$http.post('/sysUser/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    beforeClose() {
      this.show = false
    },
    submit() {
      this.$refs.register.validate(valid => {
        if (valid) {
          if (this.userInfo.id) {
            this.$http.post('/sysUser/updateByRoot', this.userInfo).then(() => {
              this.$message.success('修改成功')
              this.getListPage(this.page, this.limit, this.searchForm)
              this.show = false
              this.userInfo = {}
            }).catch((err) => {
              this.$message.error(err)
            })
          } else {
            this.$http.post('/sysUser/add', this.userInfo).then(() => {
              this.$message.success('添加成功')
              this.page = 1
              this.searchForm = {}
              this.getListPage(this.page, this.limit, this.searchForm)
              this.show = false
              this.userInfo = {}
            }).catch((err) => {
              this.$message.error(err)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
